﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>123</title>
</head>
<body id="bodd">
    <div id="box1"></div>
    <div class="box" id="box2"> box2</div>
    <div class="box" id="box3"> box3</div>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: #0080ff;
            margin-bottom: 10px;
        }
    </style>
    <style>
        .box {
            min-height: 100px;
            background-color: #0080ff;
            color: #FFF;
            margin-bottom: 30px;
        }
    </style>
    <script>

        var temp_dropObject = "";//open window, C# will change 「temp_dropPath」
        async function getDropObject() {
            // let dropObject = new Object();
            let dropObject = temp_dropObject;
            return dropObject;
        }
        //监听本机发的消息
        window.chrome.webview.addEventListener('message', event => {
            // alert(event.data);
            var obj = JSON.parse(event.data)
            temp_dropObject = obj;
            //alert(obj)
            document.getElementById("box1").innerText +=  obj+"\n"

        })

        addDropEvent(document.getElementById("box2"))
        addDropEvent(document.getElementById("box3"))

        function addDropEvent(dom) {

            dom.addEventListener("dragenter", dragenter, false);
            dom.addEventListener("dragover", dragover, false);
            dom.addEventListener("drop", drop, false);

            function dragenter(e) {
                temp_dropObject = e.dataTransfer.setData("Text", event.target.id);
                e.stopPropagation();
                e.preventDefault();
            }
            function dragover(e) {
                e.stopPropagation();
                e.preventDefault();
            }
            async function drop(e) {
                //dom.innerHTML = e.target;
                var data = event.dataTransfer.getData("Text");
                let obj = await getDropObject();
                //if (obj.Name == null) {
                //    dom.innerHTML = `<p>${obj}shuchu1<p>`;
                //} else {
                //    dom.innerHTML = `<p>${obj.Name}shuchu<p>`;
                //}
                dom.innerHTML += `<p>${data}<p>`;
                e.stopPropagation();
                e.preventDefault();
            }

        }
    </script>
</body>
</html>